import React, { useState, useEffect } from "react";
import { NavBar, Tabs } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import http from "../../utils/http";
import styles from "./index.module.css";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const [zhibo, setZhibo] = useState<any>([]);
  const items = [
    "精彩回放",
    "皮肤健康",
    "神经频道",
    "男性健康",
    "慢病科普",
    "妇儿科普",
    "风湿免疫",
    "心脑血管",
    "肿瘤治疗",
    "医生直播",
  ];
  const FearchList = async () => {
    const res = await http.get("/review/vidou", {
      params: {
        state: "皮肤健康",
      },
    });
    const { code, data } = res.data;
    if (code === 20000) {
      setZhibo(data);
    }
  };
  useEffect(() => {
    FearchList();
  }, []);
  return (
    <div>
      <NavBar style={{ background: "#fff" }} onBack={() => navigate("/")}>
        科普健康义诊直播间
      </NavBar>
      <Tabs defaultActive={2}>
        {items.map((item) => (
          <Tabs key={item} title={item}>
            {zhibo.map((item: any, ind: number) => {
              return (
                <div key={ind}>
                  <video
                    src={item.vodiusrc}
                    className={styles.video}
                    controls
                  ></video>
                  <img alt="" />
                  <p>{item.vodiustate}</p>
                </div>
              );
            })}
          </Tabs>
        ))}
      </Tabs>
    </div>
  );
};

export default Index;
